<template>
  <view
    class="x-mask fixed"
    :style="{ zIndex: zIndex }"
    :class="show ? 'x-mask_show' : ''"
    :data-zindex="zIndex"
    :data-show="show"
  >
    <view class="x-mask_bg fixed" @click.stop.prevent="tryToClose"></view>
    <view class="x-mask_content fixed">
      <view class="x-mask_top">
        <view class="x-mask_top-left">
          <slot name="left"></slot>
        </view>
        <view class="x-mask_top-middle">
          <slot name="middle"></slot>
        </view>
        <view class="x-mask_top-right">
          <slot name="right">
            <view
              v-if="showClose"
              class="x-mask_content-close"
              @click.stop.prevent="close"
            ></view>
          </slot>
        </view>
      </view>
      <slot></slot>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { ref, watch, computed } from "vue";
  import { getZIndex } from "./util";

  defineOptions({
    name: "x-mask",
  });

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    zIndex: {
      type: Number,
      default: getZIndex(),
    },
    top: {
      type: Number,
      default: 20,
    },
    maskClose: {
      type: Boolean,
      default: true,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
  });

  const emits = defineEmits(["close", "update:visible"]);

  /**顶部留下的空间 */
  const topSpace = computed(() => {
    return props.top + "%";
  });

  const show = ref(props.visible);
  const open = () => {
    show.value = true;
  };

  const tryToClose = (e) => {
    console.log("🚀 ~ tryToClose ~ e:", e);

    if (props.maskClose) {
      close();
    }
  };
  const close = () => {
    show.value = false;
    emits("update:visible", false);
    emits("close");
  };
  watch(
    () => props.visible,
    (value) => {
      show.value = value;
    }
  );

  defineExpose({
    open,
    close,
  });
</script>
<style lang="scss" scoped>
  $content-bg-color: #fff;

  $content-border-radius: 20rpx;

  .fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .x-mask {
    overflow: hidden;
    visibility: hidden;
    opacity: 1;
    transition: all 0.3s;
  }

  .x-mask_bg {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
  }

  .x-mask_content {
    top: v-bind(topSpace);
    background-color: $content-bg-color;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
    transform: translateY(100%);
    border-radius: $content-border-radius $content-border-radius 0 0;
    overflow: hidden; /** 左右两个圆角处，不处理就会透出slot内部元素 */
    padding: $content-border-radius $content-border-radius;
  }

  .x-mask_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: $content-border-radius/2 0;
  }

  .x-mask_content-close {
    // position: absolute;
    // top: 0;
    // right: $content-border-radius / 2;
    width: $content-border-radius * 2;
    height: $content-border-radius * 2;
    position: relative;

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 80%;
      height: 2rpx;
      background-color: rgba(0, 0, 0, 0.5);
      transform: translate(-50%, -50%);
    }

    &::before {
      transform: translate(-50%, -50%) rotate(45deg); /* 旋转45度 */
    }

    &::after {
      transform: translate(-50%, -50%) rotate(-45deg); /* 旋转-45度 */
    }
  }

  .x-mask_show {
    display: block;
    visibility: visible;
    opacity: 1;

    .x-mask_bg {
      visibility: visible;
      opacity: 1;
    }

    .x-mask_content {
      transform: translateY(0);
      visibility: visible;
      opacity: 1;
    }
  }
</style>
